<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="listGridBase listGridColBase" src="../listGridBase.xml"/>

		<d:element name="listGrid" extends="b:listGridBase">
			

			<d:resource type="text/css"><![CDATA[/*
The following classes are added and removed dynamically in the logic of the grid.

	btl-grid-sortable
		Set on the grid if it is sortable.

	btl-grid-columnHeaders-hidden
		Set on the grid when all column headers must be hidden.

	btl-grid-scrollbarFillers-hidden
		Set on the grid when the scrollbar fillers must be hidden.

	btl-grid-columnFillers-hidden
		Set on the grid when the column fillers must be hidden.

	btl-grid-column-header-active
		Set on a column header when it is active.

	btl-grid-column-header-sorted-ascending
		Set on a column header when the column is sorted in ascending order.

	btl-grid-column-header-sorted-descending
		Set on a column header when the column is sorted in descending order.

	btl-grid-focused
		Set on the grid when it has focus.

	btl-grid-row-focused
		Set on a row when it is focused.

	btl-grid-row-selected
		Set on a row when it is selected.

	btl-grid-row-hidden
		Set on a row when it is hidden.

	btl-grid-cell-edit
		Set on a cell when its edit controls are displayed.
*/
.btl-listGrid {
	position: relative;
	background-color: Window;
	cursor: default;
	overflow: hidden;
	color: WindowText;
}
.btl-listGrid .btl-listGrid-focusElement {
	position: absolute;
	top:-20px;
	left:-20px;
}
.btl-listGrid .btl-grid-clean {
	border-spacing: 0;
	border-width: 0;
	margin: 0;
	padding: 0;
}
.btl-listGrid .btl-grid-head,
.btl-listGrid .btl-grid-topRightFiller {
	background-color: ThreeDFace;
	color: ButtonText;
}
.btl-listGrid .btl-grid-head {
	overflow: hidden;
	position: relative;
}
.btl-listGrid .btl-grid-head table {
	table-layout: fixed;
	width: 100%;
}
.btl-listGrid .btl-grid-topLeftFiller {
	position: absolute;
	top: 0;
	left: 0;
	width: 3em;
}
.btl-listGrid .btl-grid-topRightFiller {
	position: absolute;
	top: 0;
	right: 0;
}
.btl-listGrid .btl-grid-topLeftFiller div,
.btl-listGrid .btl-grid-topRightFiller div {
	overflow: hidden;
}
.btl-listGrid .btl-grid-dataViewContainer {
	overflow: auto;
}
.btl-grid-dataViewContainer table {
	table-layout: fixed;
	width: 100%;
}
.btl-listGrid .btl-grid-cell {
	border-color: #aaa;
	border-style: dotted;
	border-width: 0;
	padding: 2px 5px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.btl-listGrid .btl-grid-row-selected .btl-grid-cell {
	border-color: ThreeDLightShadow;
}
.btl-listGrid.btl-grid-focused .btl-grid-row-focused .btl-grid-cell {
	border-width: 1px 0;
	padding: 1px 5px;
}
.btl-listGrid .btl-grid-cell.btl-grid-cell-edit {
	border-width: 0;
}
.btl-listGrid .btl-grid-cell-content {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.btl-listGrid .btl-grid-row-selected {
	background-color: ThreeDLightShadow !important;
}
.btl-grid-focused .btl-grid-row-selected {
	background-color: HighLight !important;
}
.btl-grid-focused .btl-grid-row-selected .btl-grid-cell-content {
	color: HighLightText;
}
.btl-listGrid .rowClass1 {
	background-color: Window;
}
.btl-listGrid .rowClass2 {
	background-color: #F5F5F5;
}
.btl-listGrid .btl-listGridCol {
	text-align: left;
}
.btl-listGrid .btl-listGridCol-align-center {
	text-align: center;
}
.btl-listGrid .btl-listGridCol-align-right {
	text-align: right;
}
.btl-listGrid .btl-listGridCol .btl-listGridCol-border {
	overflow: hidden;
	position: relative;
}
.btl-listGrid .btl-grid-column-header-active .btl-listGridCol-border {
	border-color: ThreeDShadow;
}
.btl-grid-sortable .btl-listGridCol .btl-grid-sortIndicator {
	position: absolute;
	right: 5px;
	top: 5px;
	height: 5px;
	width: 7px;
	visibility: hidden;
	background-image: url(media/sortArrow.png);
	font-size: 0;
}
.btl-listGrid .btl-grid-column-header-sorted-descending .btl-grid-cell-content,
.btl-listGrid .btl-grid-column-header-sorted-ascending .btl-grid-cell-content {
	padding-right: 16px;
}
.btl-listGrid .btl-grid-column-header-sorted-descending .btl-grid-sortIndicator {
	visibility: inherit;
	background-position: 0 0;
}
.btl-listGrid .btl-grid-column-header-sorted-ascending .btl-grid-sortIndicator {
	visibility: inherit;
	background-position: 0 -5px;
}
.btl-listGridCol .btl-listGridCol-label {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.btl-grid-columnFillers-hidden .columnFiller {
	display: none;
}
.btl-grid-scrollbarFillers-hidden .scrollbarFiller {
	display: none;
}
.btl-grid-columnHeaders-hidden {
	padding-top: 0;
}
.btl-grid-columnHeaders-hidden .btl-listGridCol,
.btl-grid-columnHeaders-hidden .btl-grid-topRightFiller {
	display: none;
}
/* fixes */
.btl-listGrid,
.btl-listGrid * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.ie .btl-listGrid .btl-grid-cell {
	border-style: solid;
}
.btl-listGrid {
	outline: none;
	-moz-outline: none;
}
.ie .btl-listGrid .btl-grid-topRightFiller,
.ie .btl-grid-sortable .btl-listGridCol .btl-grid-sortIndicator {
	/* make sure font doesnt stretch the element */
	overflow: hidden;
}
.ie .btl-listGrid .btl-grid-head {
	/* table would expand too much so it would appear under the top right filler */
	width: 100%;
}

.ie .btl-listGrid .btl-grid-dataViewContainer {
	/* without a height, column resize would not work because the clientWidth property was 0 */
	height: 100%;
	/* without the width, column resize/reflow would in some cases result in unwanted scrollbars */
	width: 100%;
}]]></d:resource>
			<d:resource type="image/png" src="media/sortArrow.png"/>

			<d:template type="application/xhtml+xml">
				<div class="btl-listGrid btl-grid-scrollbarFillers-hidden btl-grid-sortable btl-grid-blurred" onactivate="btl.listGrid._handleActivation(this.controller, window.event);">
					<input class="btl-invisibleFocusInput btl-listGrid-focusElement" readonly="readonly" onbeforedeactivate="return btl.listGrid._handleDeactivation(this.parentNode.controller, window.event);"/>
					<div class="btl-grid-head btl-head">
						<table cellpadding="0" cellspacing="0" border="0">
							<tbody>
								<tr><d:content/></tr>
							</tbody>
						</table>
					</div>
					<div class="btl-grid-topRightFiller btl-head btl-label btl-bevel"> </div>
					<div class="btl-grid-dataViewContainer" onscroll="bb.getControllerFromView(this).setScrollPosition(this.scrollLeft, this.scrollTop);" tabindex="-1"/>
				</div>
			</d:template>

			<d:property name="focusElement">
				<d:getter type="text/javascript"><![CDATA[
					if(!this._['_focusElement']){
						this._['_focusElement'] = this.viewNode.getElementsByTagName('input')[0];
					}
					return this._['_focusElement'];
				]]></d:getter>
			</d:property>

			<d:property name="height">
				<d:setter type="text/javascript"><![CDATA[
					this.viewNode.style.height = value;
					this._._height = value;
					bb.ui.reflow(this, true, true);
				]]></d:setter>
			</d:property>

			<d:method name="createColumnFiller">
				
				<d:body type="text/javascript"><![CDATA[
					var oCol = document.createElement('th');
					oCol.onmousedown = bb.html.handlePreventDefaultAndStop;
					oCol.className = 'btl-listGridCol columnFiller';
					oCol.innerHTML = '<div class="btl-listGridCol-border btl-bevel"><div class="btl-grid-cell-content btl-label">&#160;</div></div>';
					this.viewGate.appendChild(oCol);
					this.setProperty('viewColumnFiller', oCol);
				]]></d:body>
			</d:method>

			<d:method name="setRowSelectedState">
				
				<d:argument name="row"/>
				<d:argument name="state" default="true"/>
				<d:body type="text/javascript"><![CDATA[
					if(row){
						if(state){
							bb.html.addClass(row, 'btl-grid-row-selected');
						} else {
							bb.html.removeClass(row, 'btl-grid-row-selected');
						}
					}
				]]></d:body>
			</d:method>

			<d:method name="setRowFocusedState">
				
				<d:argument name="row"/>
				<d:argument name="state"/>
				<d:body type="text/javascript"><![CDATA[
					if(row){
						if(state){
							bb.html.addClass(row, 'btl-grid-row-focused');
						} else {
							bb.html.removeClass(row, 'btl-grid-row-focused');
						}
					}
				]]></d:body>
			</d:method>

			<d:handler event="reflow" type="text/javascript"><![CDATA[
				var oElm = bb.selector.query(this.viewNode, 'div.btl-grid-dataViewContainer');
				if (this.hasAttribute('height') && this.getAttribute('height') !== 'auto'){
					btl.html.stretch(oElm);
				} else {
					oElm.style.height = '';
				}
			]]></d:handler>
		</d:element>

		<d:element name="listGridCol" extends="b:listGridColBase">
			

			<d:template type="application/xhtml+xml">
				<th class="btl-listGridCol">
					<div class="btl-listGridCol-border btl-bevel">
						<div class="btl-grid-sortIndicator"/>
						<div class="btl-grid-cell-content">
							<div class="btl-listGridCol-label btl-label"> </div>
							<span><d:content/></span>
						</div>
					</div>
				</th>
			</d:template>

			<d:handler event="mousedown" type="text/javascript"><![CDATA[
				// Must check target because an editor control might be nested inside and should not trigger this state
				if(event.target == this){
					var oParent = this.getProperty('parentNode');
					var sSortable = oParent.getAttribute('sortable') || 'true';
					if(event.button == 0 && sSortable == 'true'){
						bb.html.addClass(this.viewNode, 'btl-grid-column-header-active');
					}
				}
			]]></d:handler>

			<d:handler event="mouseup" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-grid-column-header-active');
			]]></d:handler>

			<d:handler event="mouseleave" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-grid-column-header-active');
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>